<template>
    <div>
        <div class="section">
            <slider :slides="slides"></slider>
        </div>
        <div class="section">
            <bookList @hi="preview($event)" :books="books" :recommended="recommended"></bookList>
        </div>
        <modal-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
    import slider from './Slider.vue'
    import bookList from './BookList.vue'
    import ModalDialog from "./dialog.vue"
    export default{
        components: {bookList, slider,ModalDialog},
        created(){
            this.$http.get("/data.json").then(
                    res => {
                        this.books = res.body.books;
                        this.slides=res.body.slides;
                        this.recommended=res.body.recommended;
                    }
            )
        },
        data(){
            return {
                books: [],
                slides: [],
                recommended:[],
                selected:undefined
            }
        },
        methods: {
            sayHi: function () {
                window.alert("Hello!!");
            },
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        }
    }
</script>

